<template>
  <el-header class="bg-primary">
    <Header></Header>
  </el-header>
  <el-main class="bg-purple-light">
    <div class="cards" v-for="item in store.state.basket.select" :key="item.title">
      <el-checkbox style="float: left; width: 14px" v-model="item.select" :label="item.id"><br /></el-checkbox>
      <img :src="item.img" alt="" style="height: 70px; float: left; margin: 0px 6px" />
      <div>
        <p>{{ item.title }}</p>
        <el-tag type="info" effect="plain" size="mini">{{ item.size }}</el-tag>
        <div style="float: left; width: 100%">
          <div style="float: left; line-height: 28px">￥{{ item.price }}</div>
          <div style="float: right">
            <el-input-number v-model="item.num.num" :min="1" :max="item.num.max" label="描述文字" size="mini"></el-input-number>
          </div>
        </div>
      </div>
    </div>
  </el-main>
  <el-footer>
    <Footer></Footer>
  </el-footer>
</template>

<script setup>
import { computed, reactive, ref, watch } from 'vue'
import Header from './Header'
import Footer from './Footer'
import { useStore } from 'vuex'
const store = useStore()
watch(
  () => store.state.basket.select,
  (select, prevSelect) => {
    store.commit('editBasketAmount')
  },
  { deep: true }
)
</script>

<style lang='less' scoped>
/deep/.el-input-number--mini {
  width: 100px;
}
.cards {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 10px;
  background-color: white;
  border-radius: 5px;
  box-shadow: 0 0 10px 0 rgb(211, 211, 211);
  margin-bottom: 10px;
}
p {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  text-overflow: ellipsis;
  overflow: hidden;
}
.el-checkbox {
  display: flex;
  flex-direction: row;
  align-items: center;
  height: auto !important;
}
.img {
  width: 30%;
  border-radius: 5px;
  float: left;
}
.rigth {
  width: 70%;
  float: left;
}

.price {
  float: left;
}
/deep/.el-checkbox__label {
  width: 90%;
}
.el-footer {
  height: 40px !important;
  background-color: #fbfbfb;
}
</style>
